<template>
  <div class="layout-padding">
    <splitpanes horizontal>
      <pane size="50">
        <div class="layout-padding-auto layout-padding-view">
          <!--查询表单-->
          <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">

            <el-form-item prop="equipmentCode">
              <el-date-picker
                  style="width: 400px"
                  v-model="state.queryForm.checkTime"
                  type="daterange"
                  @change="changeCheckTime"
                  range-separator="To"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
              />
            </el-form-item>


            <el-form-item label="设备编号">
              <el-input style="width: 200px;" v-model="state.queryForm.equipmentCode" clearable placeholder="设备编号"/>
            </el-form-item>

            <el-form-item>
              <el-button icon="el-icon-search" type="primary" @click="getDataList">查询</el-button>
              <el-button icon="refresh"  @click="resetQuery">重置</el-button>
              <el-button icon="el-icon-plus"  type="primary" @click="openAddDialog">新增</el-button>
            </el-form-item>
          </el-form>
          <!--查询结果的列表-->
          <el-table :data="state.dataList" highlight-current-row
                    v-loading="state.loading" border style="width: 100%;height: 100%"
                    :cell-style="tableStyle.cellStyle" stripe :header-cell-style="tableStyle.headerCellStyle"
                    @row-click="clickRow"
                    @selection-change="selectionChangeHandle">
            >
            <el-table-column prop="equipmentCode" label="设备编号"/>
            <el-table-column prop="equipmentName" label="设备名称"/>
            <el-table-column prop="equipmentSpc" label="设备规格"/>
            <el-table-column prop="eqpProcesses" label="工序"/>
            <el-table-column prop="Supplier" label="供应商"/>
            <el-table-column prop="State" label="状态"/>
            <el-table-column prop="remark" label="备注"/>
          </el-table>
          <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination"/>
        </div>
      </pane>

    </splitpanes>
  </div>
</template>

<script setup lang="ts">
import {BasicTableProps, useTable} from '/@/hooks/table';
//import{getSelectEQP}from"/@/api/platform/qms/qmsCheckReport";

const queryRef = ref();
const locationRef = ref();

const formatDate = (date: Date): string => {
  console.log(date);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 设备表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
  // queryForm: {"checkStartTime":formatDate(new Date()),"checkEndTime":formatDate(new Date())},
  queryForm: {},

  //pageList: getFqcPageSet
});

//  table hook
const {tableStyle, getDataList, sizeChangeHandle, currentChangeHandle} = useTable(state);

// 多选变量
const selectObjs = ref([]) as any;
const multiple = ref(true);

//时间点击
const changeCheckTime = (data) => {
  state.queryForm.checkStartTime = data[0];
  state.queryForm.checkEndTime = data[1];
};

// 点击行的时候触发
const clickRow = (row: any) => {
  locationRef.value.query(row);
};

// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  // state.queryForm = {"checkStartTime":formatDate(new Date()),"checkEndTime":formatDate(new Date())}
  state.queryForm = {};
  // 清空多选
  selectObjs.value = [];
  getDataList();
};
</script>
